<template>
  <view class="rank-detail-page">
    
    <!-- 时间段切换 -->
    <view class="time-tabs">
      <view 
        class="time-tab "
		 :class="currentTab === 'year' ? 'active' : ''"
        @click="switchTab('year')"
      >
        年度排行
      </view>
      <view 
        class="time-tab " 
		:class="currentTab === 'month' ? 'active' : ''"
        @click="switchTab('month')"
      >
        月度排行
      </view>
      <view 
        class="time-tab "
		 :class="currentTab === 'week' ? 'active' : ''"
        @click="switchTab('week')"
      >
        本周排行
      </view>
      <view 
        class="time-tab "
		 :class="currentTab === 'day' ? 'active' : ''"
        @click="switchTab('day')"
      >
        今日排行
      </view>
    </view>
    
    <!-- 排行榜统计信息 -->
    <view class="rank-stats">
      <view class="stats-item">
        <text class="stats-value">{{totalCount}} </text>
        <text class="stats-label">总办理量</text>
      </view>
      <view class="stats-item">
        <text class="stats-value">{{avgCount}}</text>
        <text class="stats-label">平均办理量</text>
      </view>
      <view class="stats-item">
        <text class="stats-value">{{maxCount}}</text>
        <text class="stats-label">最高办理量</text>
      </view>
    </view>
    
    <!-- 排行榜列表 -->
    <view class="rank-list-container">
      <view class="rank-list" v-if="currentRankList.length > 0">
        <view 
          class="list-item "
		   :class="index < 3 ? 'top-three' : ''"
          v-for="(item, index) in currentRankList" 
          :key="item.user_id"
          @click="viewUserDetail(item)"
        >
          <!-- 排名标识 -->
          <view class="rank-tag-container">
            <text v-if="index ==  0" class="rank-tag" :style="{background: '#FFD700'}">
             🥇
            </text>
			<text v-if="index ==  1" class="rank-tag" :style="{background: '#C0C0C0'}">
			  🥈
			</text>
			<text v-if="index ==  2" class="rank-tag" :style="{background: '#CD7F32'}">
			 🥉
			</text>
            <text v-if="index > 2" class="common-rank">{{index + 1}}</text>
          </view>
          
          <!-- 用户信息 -->
          <view class="user-info">
            <view class="user-detail">
              <text class="username">{{ item.username }}</text>
            </view>
          </view>
          
          <!-- 办理数据 -->
          <view class="data-info">
            <text class="handle-count" :style="{color:  '#28a745'}">
              ↑ {{ item.total }}
            </text>
          </view>
        </view>
      </view>
      
      <!-- 暂无数据提示 -->
      <view class="no-data-tip" v-else>
        <image class="no-data-icon" src="/static/images/no-data.png" mode="aspectFit"></image>
        <text class="no-data-text">暂无{{currentTabText}}排行数据</text>
      </view>
    </view>
    
    
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 'year', // 当前选中的时间段
      currentTabText: '年度', // 当前时间段文本
      yearRank: [], // 年度排行数据
      monthRank: [], // 月度排行数据
      weekRank: [], // 本周排行数据
      dayRank: [], // 今日排行数据
      currentRankList: [], // 当前显示的排行列表
      searchKey: '', // 搜索关键词
      filterVisible: false, // 筛选弹窗显示状态
      
      defaultAvatar: '/static/images/default-avatar.png', // 默认头像
      totalCount: 0, // 总办理量
      avgCount: 0, // 平均办理量
      maxCount: 0 // 最高办理量
    }
  },
  onLoad() {
    // 页面加载时获取所有时间段的排行数据
    this.fetchAllRanks();
  },
  methods: {
    // 获取所有时间段排行数据
     async fetchAllRanks() {
		 const params = {
			 range:this.currentTab,
			 keyword:this.searchKey
		 }
		 const res = await this.$api.get('/business/businessDetail',params,true)
		 if(res.data.code == 200) {
			 console.log('----',res.data)
			 this.totalCount = res.data.data.total_count
			 console.log('----',this.totalCount)
			 this.avgCount = res.data.data.avg_count
			 this.maxCount = res.data.data.top_user.total
			 this.currentRankList = res.data.data.list
		 }
    },
    
    // 切换时间段
    switchTab(tab) {
      this.currentTab = tab;
      
      // 设置当前时间段文本
      const tabTextMap = {
        'year': '年度',
        'month': '月度',
        'week': '本周',
        'day': '今日'
      };
      this.currentTabText = tabTextMap[tab] || '年度';
      this.fetchAllRanks()
      // 设置当前显示的排行列表
      const rankMap = {
        'year': this.yearRank,
        'month': this.monthRank,
        'week': this.weekRank,
        'day': this.dayRank
      };
      this.currentRankList = rankMap[tab] || [];
      
      // 重新计算统计信息
      this.calculateStats();
    },
    
    // 计算统计信息
    calculateStats() {
      if (this.currentRankList.length === 0) {
        this.totalCount = 0;
        this.avgCount = 0;
        this.maxCount = 0;
        return;
      }
      
      const handleCounts = this.currentRankList.map(item => item.handle_count);
      this.totalCount = handleCounts.reduce((sum, count) => sum + count, 0);
      this.avgCount = (this.totalCount / this.currentRankList.length).toFixed(1);
      this.maxCount = Math.max(...handleCounts);
    },
    
    // 查看用户详情
    viewUserDetail(user) {
      uni.navigateTo({
        url: `/pages/user-detail/index?id=${user.user_id}&username=${user.username}`
      });
    },
    
    // 显示筛选弹窗
    showFilter() {
      this.fetchAllRanks()
    },
    
    // 学校选择
    onSchoolSelect(e) {
      const index = e.detail.value;
      this.selectedSchool = this.schoolList[index];
    },
    
    // 套餐选择
    onPackageSelect(e) {
      const index = e.detail.value;
      this.selectedPackage = this.packageList[index];
    },
    
    // 应用筛选条件
    applyFilter() {
      // 这里可以添加筛选逻辑
      uni.showToast({
        title: '筛选功能开发中',
        icon: 'none'
      });
      this.filterVisible = false;
    },
    
    // 返回
    goBack() {
      uni.navigateBack();
    }
  }
}
</script>

<style>
.rank-detail-page {
  padding-bottom: 30rpx;
  background-color: #f5f5f5;
}

/* 导航栏样式 */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30rpx;
  height: 88rpx;
  background-color: #fff;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

.navbar-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.navbar-action {
  font-size: 36rpx;
  color: #666;
}

/* 时间段切换样式 */
.time-tabs {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 88rpx;
  background-color: #fff;
  padding: 0 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  position: fixed;
  top: 0rpx;
  left: 0;
  right: 0;
  z-index: 99;
}

.time-tab {
  font-size: 28rpx;
  color: #666;
  padding: 12rpx 24rpx;
  border-radius: 30rpx;
  transition: all 0.3s;
}

.time-tab.active {
  color: #28a745;
  background-color: rgba(40, 167, 69, 0.1);
  border: 1rpx solid #28a745;
}

/* 搜索栏样式 */
.search-bar {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: #fff;
  margin-top: 80rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.search-input {
  flex: 1;
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  height: 70rpx;
  border-radius: 35rpx;
  padding: 0 20rpx;
}

.search-input .icon-search {
  font-size: 28rpx;
  color: #999;
  margin-right: 10rpx;
}

.search-input input {
  flex: 1;
  height: 70rpx;
  font-size: 28rpx;
  color: #333;
  background-color: transparent;
}

.filter-btn {
  width: 100rpx;
  height: 70rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 15rpx;
  margin-left: 20rpx;
  font-size: 28rpx;
  color: #666;
}

/* 统计信息样式 */
.rank-stats {
  display: flex;
  justify-content: space-around;
  padding: 30rpx;
  background-color: #fff;
  margin-top: 100rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.stats-item {
  text-align: center;
}

.stats-value {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.stats-label {
  font-size: 24rpx;
  color: #666;
}

/* 排行榜列表样式 */
.rank-list-container {
  padding: 20rpx 30rpx;
  margin-top: 20rpx;
}

.rank-list {
  background-color: #fff;
  border-radius: 12rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.list-item {
  display: flex;
  align-items: center;
  padding: 24rpx 30rpx;
  border-bottom: 1rpx solid #f5f5f5;
}

.list-item:last-child {
  border-bottom: none;
}

.list-item.top-three {
  background-color: rgba(248, 241, 215, 0.3);
}

/* 排名标识样式 */
.rank-tag-container {
  width: 80rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 20rpx;
}

.rank-tag {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  font-size: 28rpx;
  font-weight: bold;
  color: #fff;
  margin-bottom: 10rpx;
}

.rank-tag:nth-child(1) {
  background-color: #ffd700; /* 金色 */
}

.rank-tag:nth-child(2) {
  background-color: #c0c0c0; /* 银色 */
}

.rank-tag:nth-child(3) {
  background-color: #cd7f32; /* 铜色 */
}

.common-rank {
  font-size: 28rpx;
  color: #999;
}

/* 用户信息样式 */
.user-info {
  flex: 1;
  display: flex;
  align-items: center;
}

.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-right: 20rpx;
  border: 2rpx solid #f0f0f0;
}

.user-detail {
  flex: 1;
}

.username {
  display: block;
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 6rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-info-sub {
  font-size: 24rpx;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 数据信息样式 */
.data-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.handle-count {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 6rpx;
}

.compare-text {
  font-size: 22rpx;
  color: #999;
}

/* 暂无数据提示 */
.no-data-tip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
  color: #999;
}

.no-data-icon {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 20rpx;
}

.no-data-text {
  font-size: 28rpx;
}

/* 筛选弹窗样式 */
.filter-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
}

.popup-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.popup-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;
  max-height: 70vh;
  overflow-y: auto;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #f5f5f5;
}

.popup-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.close-btn {
  font-size: 36rpx;
  color: #999;
}

.filter-group {
  padding: 30rpx;
}

.filter-item {
  margin-bottom: 30rpx;
}

.filter-label {
  display: block;
  font-size: 28rpx;
  color: #666;
  margin-bottom: 16rpx;
}

.filter-select {
  display: flex;
  align-items: center;
  height: 80rpx;
  background-color: #f5f5f5;
  border-radius: 12rpx;
  padding: 0 20rpx;
}

.picker-content {
  flex: 1;
  font-size: 28rpx;
  color: #333;
}

.popup-footer {
  display: flex;
  padding: 20rpx 30rpx;
  border-top: 1rpx solid #f5f5f5;
}

.btn {
  flex: 1;
  height: 80rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 12rpx;
  font-size: 28rpx;
}

.cancel-btn {
  color: #666;
  background-color: #f5f5f5;
  margin-right: 20rpx;
}

.confirm-btn {
  color: #fff;
  background-color: #28a745;
}
</style>